import React, { useState, useEffect } from 'react';
import { Row, Col, Badge, Layout, Statistic, Spin, Tabs, message, Table } from 'antd';
import axios from 'axios';
import Config from '../../Config';
const { TabPane } = Tabs;
const { Header, Content, Sider } = Layout;
export default () => {
  const [loading, SetLoading] = useState(false);
  const [deNum, SetDe] = useState(0);
  const [inNum, SetIn] = useState(0);
  const [placeNum, SetPlace] = useState(0);
  const [userNum, SetUser] = useState(0);
  const [examList1, SetExam1] = useState([]);
  const [examList2, SetExam2] = useState([]);
  const [examList3, SetExam3] = useState([]);
  const [num1, Set1] = useState(0);
  const [num2, Set2] = useState(0);
  const [num3, Set3] = useState(0);
  const [processList, SetProcess] = useState([]);
  useEffect(() => {
    SetLoading(true);
    axios
      .get(Config.baseURL + '/instrument/homeData')
      .then(res => {
        if (res.data.code == 1) {
          let data = res.data.data;
          let arr1 = [],
            arr2 = [],
            arr3 = [];
          let num1 = 0,
            num2 = 0,
            num3 = 0;
          for (let i = 0; i < data.examList.length; i++) {
            let type = data.examList[i].type;
            if (type == 1) {
              arr1.push(data.examList[i]);
              num1++;
            } else if (type == 2) {
              arr2.push(data.examList[i]);
              num2++;
            } else if (type == 3) {
              arr3.push(data.examList[i]);
              num3++;
            }
          }
          SetExam1(arr1);
          Set1(num1);
          SetExam2(arr2);
          Set2(num2);
          SetExam3(arr3);
          Set3(num3);

          SetIn(data.inNum);
          SetDe(data.deNum);
          SetPlace(data.placeNum);
          SetUser(data.userNum);
          SetProcess(data.processList);
          SetLoading(false);
        } else if (res.data.code >= 10000) {
          message.error('错误信息 ' + res.data.message);
          SetLoading(false);
        }
      })
      .catch(err => {
        console.log(err);
        SetLoading(false);
      });
  }, []);
  const columns1 = [
    {
      title: '审核编号',
      dataIndex: 'id',
      fixed: 'left',
      width: '80px',
    },
    {
      title: '类型',
      dataIndex: 'type',
      width: '80px',
      render: (_, val) => {
        let text = '';
        if (val.type == 1) {
          text = '录入';
        } else if (val.type == 2) {
          text = '修改';
        } else text = '删除';
        return <>{text}</>;
      },
    },
    {
      title: '申请人',
      dataIndex: 'username',
      width: '80px',
    },
    {
      title: '申请时间',
      dataIndex: 'time',
      width: '80px',
    },
    {
      title: '当前状态',
      dataIndex: 'state',
      width: '80px',
      render: (_, val) => {
        let text = '';
        let fontColor = '';
        if (val.state == 1) {
          text = '成功';
          fontColor = '#00AF9B';
        } else if (val.state == 0) {
          text = '审核中';
          fontColor = '#FFB800';
        } else {
          text = '失败';
          fontColor = '#FF2D55';
        }
        return <span style={{ color: fontColor }}>{text}</span>;
      },
    },
  ];
  const columns2 = [
    {
      title: '类型',
      dataIndex: 'type',
      width: '40px',
      render: (_, val) => {
        let text = '';
        if (val.type == 1) {
          text = '录入';
        } else if (val.type == 2) {
          text = '修改';
        } else text = '删除';
        return <>{text}</>;
      },
    },
    {
      title: '当前开启流程名',
      dataIndex: 'processName',
      width: '40px',
    },
  ];
  return (
    <>
      <Spin spinning={loading}>
        <Layout>
          <Content style={{ padding: '10px 20px', backgroundColor: 'white' }}>
            <Row>
              <Col span={6}>
                <Statistic title="仪器数量" valueStyle={{ color: '#4B7EFE' }} value={inNum} />
              </Col>
              <Col span={6}>
                <Statistic title="用户数量" valueStyle={{ color: '#4B7EFE' }} value={userNum} />
              </Col>
              <Col span={6}>
                <Statistic title="存放地数量" valueStyle={{ color: '#4B7EFE' }} value={placeNum} />
              </Col>
              <Col span={6}>
                <Statistic title="部门数量" valueStyle={{ color: '#4B7EFE' }} value={deNum} />
              </Col>
            </Row>
          </Content>
        </Layout>

        <Row>
          <Col span={17}>
            <Layout style={{ marginTop: '20px' }}>
              <Header
                style={{
                  borderRadius: '5px 5px 0px 0px',
                  height: '40px',
                  padding: '0px 15px',
                  margin: '0px 0px',
                  backgroundColor: 'white',
                  textAlign: 'left',
                  lineHeight: '40px',
                }}
              >
                审核记录
              </Header>
              <Content
                style={{
                  padding: '10px 20px',
                  backgroundColor: 'white',
                  height: '60vh',
                  overflowY: 'auto',
                }}
              >
                <Tabs defaultActiveKey="1">
                  <TabPane
                    tab={
                      <>
                        <Badge count={num1}>仪器录入</Badge>
                      </>
                    }
                    key="1"
                  >
                    <Table columns={columns1} dataSource={examList1}></Table>
                  </TabPane>
                  <TabPane
                    tab={
                      <>
                        <Badge count={num2}>仪器修改</Badge>
                      </>
                    }
                    key="2"
                  >
                    <Table dataSource={examList2} columns={columns1}></Table>
                  </TabPane>
                  <TabPane
                    tab={
                      <>
                        <Badge count={num3}>仪器删除</Badge>
                      </>
                    }
                    key="3"
                  >
                    <Table dataSource={examList3} columns={columns1}></Table>
                  </TabPane>
                </Tabs>
              </Content>
            </Layout>
          </Col>
          <Col span={1}></Col>
          <Col span={6}>
            <Layout style={{ marginTop: '20px' }}>
              <Header
                style={{
                  borderRadius: '5px 5px 0px 0px',
                  height: '40px',
                  padding: '0px 15px',
                  margin: '0px 0px',
                  backgroundColor: 'white',
                  textAlign: 'left',
                  lineHeight: '40px',
                }}
              >
                当前操作流程
              </Header>
              <Content style={{ padding: '10px 20px', backgroundColor: 'white', height: '60vh' }}>
                <Table columns={columns2} dataSource={processList}></Table>
              </Content>
            </Layout>
          </Col>
        </Row>
      </Spin>
    </>
  );
};
